<template>
  <div>
    <el-form class="lable-top" label-position="top" size="mini">
      <el-row :gutter="10">
        <el-col v-permission="['super']" :span="4">
          <el-form-item label="组织">
            <el-select v-model="search.org_id" filterable>
              <el-option
                v-for="(item, index) in company"
                :key="index"
                :label="item.name"
                popper-class="w100"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item v-permission="['super']" label=" ">
            <el-button @click="loadingAccessKey">查询终端接入码</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <!--      <el-form-item label="组织接入码">-->
      <!--        <el-input readonly :value="access_key" />-->
      <!--      </el-form-item>-->
    </el-form>

    <h3>说明</h3>

    <div class="tips">
      终端接入码 (ACCESS
      KEY)，是终端程序接入到您组织账户平台的重要信息之一，它被嵌入在由您的组织账户平台所生成的终端程序配置文件中，并为终端程序提供了以下特性：
    </div>
    <div class="desc"></div>
    <div class="desc">1. 自动发现</div>
    <div class="desc">2. 可接入授权</div>
    <div class="desc">3. 组织归属</div>

    <h3>接入码位置</h3>

    <div class="tips">
      终端接入码仅存在于以下位置:
    </div>
    <div class="desc"></div>
    <div class="desc">1. 组织账户平台 -> 组织 -> 终端接入码</div>
    <div class="desc">2. 终端程序配置文件</div>

    <h3>特别提示</h3>
    <div class="desc">
      终端接入码十分重要，为了保证您组织终端程序的稳定部署与组织账户平台检测的可靠性，非必要情况下请不要重置它；并且，您必须确保它不会被未经许可的人阅览或转储。
    </div>
    <div class="desc">
      若您认为（或有迹象表明）当前终端接入码已被泄露或滥用
      (可能由于网络攻击或内部破坏者)，请立即重置终端接入码!
    </div>

    <h3>当前接入码</h3>

    <div class="desc insert-code">
      当前接入码为：
      <div class="code">{{ access_key }}</div>
      <i class="copy-icon el-icon-document-copy" @click="copy"></i>
    </div>

    <h3>接入码重置</h3>

    <div class="desc">
      如需要重置接入码，请点击下面的按钮:
    </div>
    <div class="button mt10">
      <el-button class="jus" @click="reset">
        重置终端接入码
      </el-button>
    </div>
  </div>
</template>

<script>
import org from "@/api/org";
import org_getall from "@/utils/mixin/org_getall";
export default {
  name: "Insert",
  mixins: [org_getall],
  data: () => {
    return {
      search: {
        org_id: ""
      },
      access_key: ""
    };
  },
  mounted() {
    this.loadingData();
  },
  methods: {
    async loadingData() {
      await this.loadingOrgGetall();
      await this.loadingAccessKey();
    },
    loadingAccessKey() {
      return org
        .access_key_get({
          org_id: this.search.org_id
        })
        .then(res => {
          const {
            data: { access_key }
          } = res;
          this.access_key = access_key;
        });
    },
    copyContent(value, type = "input") {
      const input = document.createElement(type);
      input.setAttribute("readonly", "readonly"); // 设置为只读, 防止在 ios 下拉起键盘
      // input.setAttribute('value', value); // textarea 不能用此方式赋值, 否则无法复制内容
      input.value = value;
      document.body.appendChild(input);
      input.setSelectionRange(0, 9999); // 防止 ios 下没有全选内容而无法复制
      input.select();
      document.execCommand("copy");
      document.body.removeChild(input);
    },
    copy() {
      this.copyContent(this.access_key);
      this.$message.success("复制成功");
    },
    reset() {
      this.$confirm("您真的需要重置终端接入码吗？请再次确认", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return org.org_resetaccesskey({
            org_id: this.search.org_id
          });
        })
        .then(res => {
          this.$message.success(res.data.message);
          this.loadingAccessKey();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.tips {
  color: $--color-info-light-3;
  position: relative;
  padding-left: 10px;
  font-size: 12px;
  &::after {
    content: "";
    position: absolute;
    width: 4px;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: $--color-info-light-3;
  }
}
.desc {
  font-size: 12px;
}
.insert-code {
  display: flex;
  align-items: center;
  .code {
    padding: 4px 6px;
    background-color: #f5f5f5;
    border-radius: 6px;
    border: $--color-info-light solid 1px;
  }
  .copy-icon {
    padding-left: 6px;
    color: $--color-primary;
    cursor: pointer;
  }
}
.button {
  display: flex;
  justify-content: center;
  .jus {
    width: 50%;
  }
}
</style>
